<template>

    <!-- 所有的内容要被根节点包含起来 -->
    <div class="photoinfo-container">
        <h3>{{ photoInfo.abstract }}</h3>
        <p class="subTitle">
            <span class="subTime">发表时间: {{ photoInfo.time | dateFormat }}</span>
            <span class="subClick">点击: {{ photoInfo.click }}</span>
        </p>

        <!--缩略图区域-->
        <vue-preview :slides="slideList" @close="handleClose"></vue-preview>

        <!--图片内容区域-->
        <div class="content" v-html="photoInfo.content"></div>

        <!--放置一个现成的 评论子组件-->
        <comment-box :id="this.id"></comment-box>

    </div>


</template>

<script type="text/javascript">

    import {Toast} from "mint-ui"

    import comment from '../subcomponents/comment.vue'

    export default {
        data: function () {
            return {
                id: this.$route.params.id,
                photoInfo: {},
                slideList: [
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                        msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    }
                ]
            }
        },
        created() {
            this.getProtoInfo()
        },
        // 执行的方法
        methods: {
            getProtoInfo() {
                this.$http.get('./src/FalseData/newsInfo.json').then(res => {
                    if (res.body.status === 0) {
                        this.photoInfo = res.body.message[this.id - 1];
                    } else {
                        Toast("图文详情获取失败")
                    }
                })
            },
            handleClose() {
                console.log("关闭了缩略图")
            }
        },
        components: {
            "comment-box": comment
        }
    }

</script>

<style lang="scss" scoped>

    .photoinfo-container {
        padding: 3px;
        h3 {
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subTitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .content {
            font-size: 13px;
            line-height: 30px;
        }

        .thumbs {
            img {
                margin: 10px;
                box-shadow: 0 0 8px #999;
            }
        }
    }
</style>
